<template>
  <div class="study-room-page">
    <common-header />
    
    <div class="main-content">
      <!-- 搜索区域 -->
      <div class="search-section">
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索自习室名称、位置..."
            prefix-icon="el-icon-search"
            clearable
          />
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
        <div class="filter-box">
          <el-select v-model="filters.type" placeholder="自习室类型" clearable>
            <el-option label="普通自习室" value="normal" />
            <el-option label="研讨室" value="discussion" />
            <el-option label="电脑室" value="computer" />
            <el-option label="休息室" value="rest" />
          </el-select>
          <el-select v-model="filters.status" placeholder="房间状态" clearable>
            <el-option label="空闲" value="available" />
            <el-option label="已预约" value="booked" />
            <el-option label="维护中" value="maintenance" />
          </el-select>
          <el-select v-model="filters.capacity" placeholder="容纳人数" clearable>
            <el-option label="4人以下" value="1-4" />
            <el-option label="5-8人" value="5-8" />
            <el-option label="8人以上" value="8+" />
          </el-select>
        </div>
      </div>

      <!-- 视图切换 -->
      <div class="view-toggle">
        <el-radio-group v-model="viewMode" size="small">
          <el-radio-button label="grid">
            <i class="el-icon-s-grid"></i> 网格视图
          </el-radio-button>
          <el-radio-button label="map">
            <i class="el-icon-map-location"></i> 地图视图
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- 网格视图 -->
      <div v-show="viewMode === 'grid'" class="grid-view">
        <el-row :gutter="20" v-loading="loading">
          <el-col :span="6" v-for="room in rooms" :key="room.id">
            <div class="room-card">
              <div class="room-image">
                <img :src="room.image" :alt="room.name">
                <div :class="['status-tag', room.status]">{{ getStatusText(room.status) }}</div>
                <div class="quick-actions">
                  <el-button type="primary" size="small" @click="handleBook(room)" :disabled="room.status !== 'available'">
                    立即预约
                  </el-button>
                  <el-button type="text" size="small" @click="showDetail(room)">
                    查看详情
                  </el-button>
                </div>
              </div>
              <div class="room-info">
                <h3>{{ room.name }}</h3>
                <p class="location">
                  <i class="el-icon-location"></i>
                  {{ room.location }}
                </p>
                <div class="features">
                  <span><i class="el-icon-user"></i> {{ room.capacity }}人</span>
                  <span><i class="el-icon-money"></i> ¥{{ room.price }}/小时</span>
                  <el-rate v-model="room.rating" disabled show-score text-color="#ff9900" />
                </div>
                <div class="tags">
                  <el-tag v-for="tag in room.tags" :key="tag" size="small" effect="plain">
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            @current-change="handlePageChange"
          />
        </div>
      </div>

      <!-- 地图视图 -->
      <div v-show="viewMode === 'map'" class="map-view">
        <!-- 这里集成地图组件，如高德地图或百度地图 -->
        <div class="map-container">
          地图加载中...
        </div>
      </div>
    </div>

    <!-- 预约对话框 -->
    <el-dialog title="预约自习室" :visible.sync="bookingDialog.visible" width="500px">
      <el-form :model="bookingForm" label-width="100px" :rules="bookingRules" ref="bookingForm">
        <el-form-item label="预约日期" prop="date">
          <el-date-picker
            v-model="bookingForm.date"
            type="date"
            placeholder="选择日期"
            :picker-options="dateOptions"
          />
        </el-form-item>
        <el-form-item label="时间段" prop="timeSlot">
          <el-time-select
            v-model="bookingForm.startTime"
            placeholder="开始时间"
            :picker-options="startTimeOptions"
          />
          <span class="time-separator">至</span>
          <el-time-select
            v-model="bookingForm.endTime"
            placeholder="结束时间"
            :picker-options="endTimeOptions"
          />
        </el-form-item>
        <el-form-item label="使用人数" prop="userCount">
          <el-input-number v-model="bookingForm.userCount" :min="1" :max="bookingDialog.room.capacity" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="bookingForm.remark" rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="bookingDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitBooking">确认预约</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="自习室详情" :visible.sync="detailDialog.visible" width="700px">
      <div v-if="detailDialog.room" class="room-detail">
        <el-carousel height="300px">
          <el-carousel-item v-for="(img, index) in detailDialog.room.images" :key="index">
            <img :src="img" class="detail-image">
          </el-carousel-item>
        </el-carousel>
        <div class="detail-info">
          <h2>{{ detailDialog.room.name }}</h2>
          <p class="description">{{ detailDialog.room.description }}</p>
          <div class="info-section">
            <h3>基本信息</h3>
            <el-row>
              <el-col :span="8">
                <p><i class="el-icon-location"></i> 位置：{{ detailDialog.room.location }}</p>
              </el-col>
              <el-col :span="8">
                <p><i class="el-icon-user"></i> 容纳人数：{{ detailDialog.room.capacity }}人</p>
              </el-col>
              <el-col :span="8">
                <p><i class="el-icon-money"></i> 价格：¥{{ detailDialog.room.price }}/小时</p>
              </el-col>
            </el-row>
          </div>
          <div class="info-section">
            <h3>设施配置</h3>
            <el-tag v-for="facility in detailDialog.room.facilities" :key="facility" size="small">
              {{ facility }}
            </el-tag>
          </div>
          <div class="info-section">
            <h3>使用规则</h3>
            <ul>
              <li v-for="(rule, index) in detailDialog.room.rules" :key="index">
                {{ rule }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonHeader from '@/components/Header.vue'

export default {
  name: 'StudyRoomPage',
  components: {
    CommonHeader
  },
  data() {
    return {
      searchQuery: '',
      filters: {
        type: '',
        status: '',
        capacity: ''
      },
      viewMode: 'grid',
      rooms: [],
      total: 0,
      pageSize: 12,
      currentPage: 1,
      loading: false,
      bookingDialog: {
        visible: false,
        room: {
          capacity: 4
        }
      },
      bookingForm: {
        date: '',
        startTime: '',
        endTime: '',
        userCount: 1,
        remark: ''
      },
      dateOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      startTimeOptions: {
        start: '08:00',
        step: '00:30',
        end: '22:00'
      },
      endTimeOptions: {
        start: '08:30',
        step: '00:30',
        end: '22:30'
      },
      bookingRules: {
        date: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        userCount: [{ required: true, message: '请选择使用人数', trigger: 'change' }]
      },
      detailDialog: {
        visible: false,
        room: null
      }
    }
  },
  created() {
    this.fetchRoomList()
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
      this.fetchRoomList()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchRoomList()
    },
    async fetchRoomList() {
      this.loading = true
      try {
        const mockData = {
          total: 100,
          list: Array(this.pageSize).fill(null).map((_, index) => ({
            id: (this.currentPage - 1) * this.pageSize + index + 1,
            name: `阳光自习室A${index + 101}`,
            location: '图书馆一楼',
            capacity: 4,
            price: 10,
            rating: 4.5,
            status: 'available',
            image: 'https://via.placeholder.com/300x200',
            tags: ['安静', '采光好', '有空调'],
            description: '这是一个安静舒适的自习环境...',
            facilities: ['空调', 'WiFi', '插座', '书架'],
            rules: ['禁止喧哗', '保持整洁', '不可饮食'],
            images: [
              'https://via.placeholder.com/800x400',
              'https://via.placeholder.com/800x400'
            ]
          }))
        }

        this.total = mockData.total
        this.rooms = mockData.list
      } catch (error) {
        console.error('获取自习室列表失败:', error)
        this.$message.error('获取自习室列表失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    getStatusText(status) {
      const statusMap = {
        available: '空闲',
        booked: '已预约',
        maintenance: '维护中'
      }
      return statusMap[status] || status
    },
    handleBook(room) {
      this.bookingDialog.room = room
      this.bookingDialog.visible = true
      this.bookingForm = {
        date: '',
        startTime: '',
        endTime: '',
        userCount: 1,
        remark: ''
      }
    },
    showDetail(room) {
      this.detailDialog.room = room
      this.detailDialog.visible = true
    },
    submitBooking() {
      this.$refs.bookingForm.validate(valid => {
        if (valid) {
          // TODO: 调用预约API
          this.$message.success('预约成功')
          this.bookingDialog.visible = false
        }
      })
    }
  }
}
</script>

<style scoped>
.study-room-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  padding: 84px 20px 20px;  /* 顶部padding增加，为导航栏留出空间 */
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-box .el-input {
  width: 400px;
}

.filter-box {
  display: flex;
  gap: 15px;
}

.view-toggle {
  margin-bottom: 20px;
  text-align: right;
}

.room-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.room-image {
  position: relative;
  height: 200px;
}

.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
}

.status-tag.available {
  background: #67C23A;
}

.status-tag.booked {
  background: #F56C6C;
}

.status-tag.maintenance {
  background: #E6A23C;
}

.quick-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.room-image:hover .quick-actions {
  opacity: 1;
}

.room-info {
  padding: 15px;
}

.location {
  color: #909399;
  margin: 5px 0;
}

.features {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
  color: #606266;
}

.tags {
  margin-top: 10px;
}

.tags .el-tag {
  margin-right: 5px;
}

.pagination {
  margin-top: 30px;
  text-align: center;
}

.map-container {
  height: 600px;
  background: #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-separator {
  margin: 0 10px;
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info {
  padding: 20px;
}

.info-section {
  margin: 20px 0;
}

.info-section h3 {
  margin-bottom: 10px;
  color: #303133;
}

.description {
  color: #606266;
  line-height: 1.6;
}
</style> 